<route>
    {
        meta: {
            layout: 'index',
            title:'人员管理'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-col :span="5">
                <DeptTree @confirm="handleSearch"></DeptTree>
            </a-col>
            <a-col :span="19">
                <a-row>
                    <a-input-search allow-clear v-model:value="queryParams.searchKey" placeholder="学工号/姓名/手机号模糊"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="reqData()" />
                    <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="$.emit('create-user', null)">
                        <template #icon><plus-outlined /></template>新增
                    </a-button>
                    <a-button style="margin-bottom: 10px; left:30px; width: 80px;" @click="resetQuery()">
                        <template #icon>
                            <SyncOutlined />
                        </template>重置
                    </a-button>
                </a-row>
                <AntdZh>
                    <a-table :columns="customColumns" :data-source="dataSource" :loading="loading" :pagination="pagination"
                        @change="handleTableChange">
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.dataIndex === 'nickName'">
                                <a-badge>
                                    <template #count>
                                        <WomanOutlined v-if="record.sex == '女'" style="color: #f5222d" />
                                        <ManOutlined v-else style="color: #53bfee" />

                                    </template>
                                    <view v-if="record.avatar == null">
                                        <a-avatar shape="square" size="large"
                                            :style="{ backgroundColor: colorList[record.nickName.charCodeAt(0) % 7], verticalAlign: 'middle' }">
                                            {{ record.nickName.substring(0, 1) }}
                                        </a-avatar>
                                    </view>
                                    <view v-else>
                                        <a-avatar :src="record.avatar" shape="square" size="large"></a-avatar>
                                    </view>
                                </a-badge>
                                {{ record.nickName }}
                            </template>
                            <template v-else-if="column.dataIndex === 'dept'">
                                <view v-if="deptStore.deptMap">
                                    {{ deptStore.getDeptName(record.deptId) || null }}
                                </view>

                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <!--执行状态-->
                                <a-tag color="green" v-if="record.status">在职</a-tag>
                                <a-tag color="red" v-else>离职</a-tag>

                            </template>
                            <template v-if="column.dataIndex === 'action'">
                                <a-row>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>修改信息</template>
                                            <view v-isAdmin>
                                                <a-button type="link" @click="$.emit('update-user', record.id)">
                                                    <FormOutlined />
                                                </a-button>
                                            </view>
                                        </a-tooltip>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>重置密码</template>
                                            <view v-isAdmin>
                                                <a-button type="link" @click="$.emit('reset-pwd', record.id)">
                                                    <KeyOutlined />
                                                </a-button>
                                            </view>
                                        </a-tooltip>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>角色授权</template>
                                            <view v-isAdmin>
                                                <a-button type="link" @click="$.emit('user-role-grant', record)">
                                                    <SafetyOutlined style="color: green;" />
                                                </a-button>
                                            </view>
                                        </a-tooltip>
                                    </a-col>
                                </a-row>
                            </template>
                        </template>
                    </a-table>
                </AntdZh>
            </a-col>
        </a-row>
        <!--密码重置-->
        <PwdResetModal></PwdResetModal>
        <!--用户新建-->
        <UserCreateModal></UserCreateModal>
        <!--用户角色授予-->
        <UserUpdateModal></UserUpdateModal>
        <UserRoleGrantManager />
    </view>
</template>
<script setup>
import UserCreateModal from './components/UserCreateModal.vue';
import UserUpdateModal from './components/UserUpdateModal.vue';
import PwdResetModal from './components/PwdResetModal.vue';
import UserRoleGrantManager from './components/UserRoleGrantManager/index.vue';
import { SafetyOutlined, FormOutlined, WomanOutlined, ManOutlined, KeyOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons-vue';
import useApp from '@/hooks';
const { $ } = useApp();
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
import { queryList } from '@/module/org/api/user';
import DeptTree from '@/module/org/components/DeptTree';
import { columns, defaultQueryParams } from './index';


const customColumns = ref(columns);
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#67e4dd', '#9ebbdc', '#ad9edc'];
const queryParams = ref($.freeStore(defaultQueryParams));
const dataSource = ref([]);
const loading = ref(false);
const total = ref(0)

const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
// 重置
function resetQuery() {
    queryParams.value = $.freeStore(defaultQueryParams);
    reqData();
}
// 部门选中
function handleSearch(deptId) {
    queryParams.value.deptId = deptId;
    reqData();
}
function handleTableChange(page, filters, sorted) {


    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;

    // 状态
    var status = filters.status;
    console.log(status)
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }


    reqData();
}
// 请求数据
function reqData() {
    loading.value = true;
    queryList(queryParams.value).then(res => {
        console.log(res)
        loading.value = false;
        dataSource.value = res.content;
        total.value = res.totalElements;
    })
}
reqData();
$.on('fresh-user', r => {
    reqData();
});
</script>